<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分类</title>
		<!-- 引入 Vue.js 和 Element UI 的脚本 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<!-- 引入 Element UI 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

		<link href="css/index.css" rel="stylesheet" type="text/css"/>
		<link href="css/ranking.css" rel="stylesheet" type="text/css"/>
		<link href="css/author.css" rel="stylesheet" type="text/css"/>

	</head>
	<body>
		
		<div id="app">
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="#">消息通知</a>

						</div>


						 <div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						 <div class="right-user">
							 <div   style="display: flex; align-items: center;cursor: pointer;"  >
								 <span  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.author.authorName}} </span>
							 </div>
							 <div   style="display: flex; align-items: center;">
								 <span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							 </div>
							 
						 </div>
	 		 
					</div>
				</div>
			</div>
			<div class="rank">
				<div class="rank-main">
					 <div class="rank">
						 <div class="rank-wrap">
							 	<el-row class="tac" style="margin-top: 20px;">
							 	  <el-col :span="12" style="width: 100%;">
							 	     
							 	    <el-menu
							 	      default-active="1-1"
							 	      class="el-menu-vertical-demo"
							 	      @open="handleOpen"
							 	      @close="handleClose">


										<el-submenu index="1">
											<template slot="title">
												<i class="el-icon-location"></i>
												<span>工作台</span>
											</template>
											<el-menu-item-group>

												<el-menu-item index="1-1" @click="Jump1()">开新作品</el-menu-item>
												<el-menu-item index="1-2" @click="Jump2()">更新小说</el-menu-item>
											</el-menu-item-group>

										</el-submenu>
									  

							 	      <el-menu-item index="3" @click="Jump3()">
							 	        <i class="el-icon-setting"></i>
							 	        <span slot="title">收益管理</span>
							 	      </el-menu-item>
										<el-menu-item index="4">
											<i class="el-icon-setting"></i>
											<span slot="title">评论管理</span>
										</el-menu-item>
							 	    </el-menu>
							 	  </el-col>
								</el-row>
						 </div>
						 <div   class="rank-mulu">
							 <div v-if="isJump1">

								 <header class="muye-rank-wrap-header">
									 <div class="xiahuaxian">
										 <h1>开新作品</h1>
									 </div>
								 </header>
								 <div style="margin-top: 50px">
									 <el-form ref="form" :model="form" label-width="80px">
										 <el-form-item label="小说书名"  style="width: 50%;">
											 <el-input v-model="form.title"></el-input>
										 </el-form-item>

										 <el-form-item label="小说类型">
											 <el-select v-model="form.categoryId" placeholder="请选择">
												 <el-option
														 v-for="item in category "
														 :key="item.categoryId"
														 :label="item.categoryName"
														 :value="item.categoryId">
												 </el-option>
											 </el-select>
										 </el-form-item>

										 <el-form-item label="小说状态" >
											 <el-radio v-model="form.statu" label="1">连载中</el-radio>
											 <el-radio v-model="form.statu" label="0">已完结</el-radio>
										 </el-form-item>
										 <el-form-item label="小说频道" >
											 <el-radio v-model="form.sex" label="1">男频</el-radio>
											 <el-radio v-model="form.sex" label="0">女频</el-radio>
										 </el-form-item>

										 <el-form-item label="小说封面">
											 <el-upload
													 class="avatar-uploader"
													 action="/houtai/novel/upImg/"
													 :show-file-list="false"
													 :on-success="handleAvatarSuccess"
													 :before-upload="beforeAvatarUpload">
												 <img v-if=" form.coverImage" :src=" form.coverImage" class="avatar"  >
												 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
											 </el-upload>
										 </el-form-item>

										 <el-form-item label="小说简介"  style="width: 80%;">
											 <el-input type="textarea" v-model="form.introduction"  :rows="5"></el-input>
										 </el-form-item>
										 <el-form-item>
											 <el-button style="margin-left: 250px;" type="primary" @click="onSubmit">立即添加</el-button>

										 </el-form-item>
									 </el-form>

								 </div>
							 </div>
							 <div v-if="isJump2">
								 <header class="muye-rank-wrap-header">
									 <div class="xiahuaxian">
										 <h1>我的小说</h1>
									 </div>
								 </header>
								 <div v-for=" n in novel" style="margin-top: 30px" class="long-article-table-item long-article-table-item-active" id="long-article-table-item-7385851581058534424">
									 <div class="home-book-item">
										 <div class="book-item-info">
											 <div class="muye-book-cover info-cover is-book has-hover">
												 <div class="book-cover-content">
													 <div class="book-shadow"></div>
													 <div class="book-cover loaded" style="border-radius: 4px;">
														 <div class="book-cover-img"  ><img style="width: 100%;height: 100%;" :src="n.coverImage"></div>
														 <div class="book-effect"></div>
													 </div>
												 </div>
											 </div>
											 <div class="info-content">
												 <div class="info-content-title font-1">
													 <div class="hoverup">{{n.title}} </div>
												 </div>
												 <div class="info-left">
													 <div class="desc font-4">最近更新：{{n.zuixin}}</div>
													 <div class="detail font-4 ">
														 <div class="detail-chapter font-4">
															 <span class="right-info-number">{{n.chapterNum}}</span> 章
														 </div>
														 <span class="detail-divider"></span>
														 <div class="detail-wordcount font-4">
															 <span class="right-info-number">{{n.wordCount}} 字</span>
														 </div>
														 <span class="detail-divider"></span>
														 <div class="property">待审核</div>
													 </div>
												 </div>
												 <div class="info-right">
													 <div class="right-btns">

														 <button  @click="genxin(n.novelId)" class="arco-btn arco-btn-primary arco-btn-size-default arco-btn-shape-round serial-arco-btn right-btn" type="button">
															 <span>更新章节</span>
														 </button>

													 </div>
												 </div>
											 </div>
										 </div>
									 </div>
								 </div>
							 </div>
							 <div v-if="isJump3">
								 <header class="muye-rank-wrap-header">
									 <div class="xiahuaxian">
										 <h1>小说打赏</h1>
									 </div>
								 </header>
								 <div>

								 </div>

							 </div>
				</div>
				
			</div>
			
			<div class="td-footer">
				  <p>Company Name</p>
				 <p>Address: 123 Street, City, Country</p>
				 <p>Email: info@example.com</p>
			</div>
		</div>
	</div>
</div>
	</body>
	
	
	
	<script>
	 
	 

	const v = new Vue({
		el : "#app",
		data() {
			  
		 
			 return {
				  
				   
				  isSticky: false,
				  author_name: 'lisi',
				  category: '悬疑脑洞',
				  title: '夜幕之下',
				 author: {
					  authorId: '',
					  authorName: '',
					  motto: '',
					 aPhone: '',

				 },
				 form: {
					 title: '',
					 authorId: '',
					 categoryId: '',
					 statu:  '',
					 sex: '',
					 coverImage: '',
					 introduction: '',
					 publishDate:  new Date(),

				 },
				 category: [],

				 isJump1: true,
				 isJump2: false,
				 isJump3: false,


				 novel:[{
					  novelId: '',
					 title: '',
					 authorId: '',
					 categoryId: '',
					 statu: '',
					 sex: '',
					 coverImage: '',
					 introduction: '',
					 publishDate:  '',
					 zuixin:'暂未发布章节', //最近更新章节
					 chapterNum: '0', //章节数
					 wordCount: '0', //字数



				 }],




				};
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);

			axios.get('/houtai/category/select').then(res => {
				this.category = res.data;

			});
			this.iflogin();

		},
		methods: {
			handleScroll() {
				const scrollHeight = window.scrollY || document.documentElement.scrollTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;
			},
			 handleOpen(key, keyPath) {
			        console.log(key, keyPath);
			  },
			  handleClose(key, keyPath) {
				console.log(key, keyPath);
			  },
			handleAvatarSuccess(res ) {
				console.log('上传成功，服务器返回的数据：', res);
				this.form.coverImage = res;

			},
			beforeAvatarUpload(file) {

				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return   isLt2M;
			},
			onSubmit() {
				if(this.form.title != "" || this.form.categoryId != "" || this.form.statu != "" || this.form.sex != "" || this.form.coverImage != "" || this.form.introduction != ""){
					this.form.authorId = this.author.authorId;
					axios.post('/houtai/novel/add', this.form).then(res => {

						if (res.data == 1){

							alert("添加成功");
							this.form = {
								title: '',
								authorId: '',
								categoryId: '',
								statu: '',
								sex: '',
								coverImage: '',
								introduction: '',
								publishDate:  new Date(),
							};
						}

					});
				}
				else{
					alert("请填写完整信息");
				}


			},
			iflogin(){
				axios.get('/other/author/iflogin').then(res=>{

					if(res.data != ""){
						this.author.authorId = res.data;
						axios.get('/other/author/getAuthor?authorId='+this.author.authorId).then(res=>{
							this.author = res.data;
						});

					}
					this.selectNovel();


				});

			},
			logout(){
				axios.post('/other/author/logout').then(res=>{

					window.location.href = "/index/login.html";


				});

			},
			selectNovel(){
				axios.get('/other/author/selectNovel?authorId='+this.author.authorId).then(res=>{
					this.novel = res.data;
					this.novel.forEach(item => {
						this.selectChapter(item );

					});


				});
			},
			selectChapter(item){
				axios.get('/other/author/selectChapter?novelId='+item.novelId).then(res=>{
					if(res.data != ""){
						item.zuixin = res.data.zuixin;
						item.chapterNum = res.data.chapterNum;
						item.wordCount = res.data.wordCount;
					}
					else{
						item.zuixin = '暂未发布章节';
						item.chapterNum = '0';
						item.wordCount = '0';
					}




				});

			},
			genxin( novelId){
				window.location.href = "edit.html#"+novelId;
			},
			Jump1(){
				this.isJump1 = true;
				this.isJump2 = false;
				this.isJump3 = false;
			},
			Jump2(){
				this.isJump1 = false;
				this.isJump2 = true;
				this.isJump3 = false;

			},
			Jump3(){
				this.isJump1 = false;
				this.isJump2 = false;
				this.isJump3 = true;
			}

		}
		 
		 
		 
	})
	 
	</script>
</html>
